<script setup>
  import axios from "@/axios/index.js";
  import {Plus} from "@element-plus/icons-vue";
  import {defineEmits, defineModel} from "@vue/runtime-core";
  import {reactive, ref} from "vue";
  import {ElMessage} from "element-plus";
  import {trigger} from "@vue/reactivity";

  let addDialog = defineModel('addDialog')
  const emit = defineEmits(['loadTableData'])
  const formRef = ref()

  let formData = reactive({
    className:'',
    staffId:'',
    teacherId:'',
    subjectId:'',
    classDescription:''
  })

  let staffList = []
  //获取教员列表
  axios.post(`/staff/selectAll?current=${0}&size=${0}`).then (resp=>{
    //console.log(resp)
    for (let i = 0; i < resp.data.data.data.length; i++) {
      let staffItem = resp.data.data.data[i].staff
      staffList.push({
        realName:staffItem.realName,
        staffId: staffItem.id
      })
    }
  })

  let subjectList = reactive([])
  //获取学科列表
  axios.get('/api/v1/admin/subject').then(resp => {
    //console.log(resp.data.data)
    for (let i = 0; i < resp.data.data.length; i++) {
      let subjectItem = resp.data.data[i]
      subjectList.push({
        label: subjectItem.subjectName,
        value: subjectItem.id,
      })
    }
  })

  //表单校验
  const formRules = reactive({
    className: [
      {required:true,message: "请输入班级名称", trigger: 'blur'},
      {min:2,max:10,message: "班级名为2~10位非空字符"},
      {pattern: '^[a-zA-Z][a-zA-Z0-9]{5,9}$', message:'第一个字符为字母其余为数字',trigger:'blur'}
    ],
    staffId:[{required:true,message:'教员不能为空',trigger:'blur'}],
    subjectId:[{required:true,message:'学科不能为空',trigger:'blur'}],
    teacherId:[{required:true,message:'班主任不能为空',trigger:'blur'}]
  })

  //保存数据
  const save = (formEl) => {
    if (!formRef) return
    formEl.validate((valid) => {
      if (valid) {
        if(formData.staffId === formData.teacherId) {
          ElMessage({
            type:'error',
            message:'教员与班主任不能为同一个人'
          })
          return
        }
        //console.log(formData)
        axios.post('/api/v1/class/insert', formData).then(resp => {
          ElMessage({
            message: resp.data.message,
            type: 'success',
            duration: 1500,
            onClose: function () {
              addDialog.value = false
              emit('loadTableData')
              //清除表单数据
              formData = {}
              // 刷新页面
              location.reload();
            }
          })
        }).catch(error => {})
      }
    })
  }

  //重置表单校验
  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }
</script>

<template>
  <el-dialog v-model="addDialog" title="班级添加" width="450" height="550">
    <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
      <el-form-item label="班级名" label-width="80" prop="className" style="width: 276px">
        <el-input placeholder="输入班级名称" autocomplete="off" v-model="formData.className" />
      </el-form-item>
      <el-form-item label="教员:" label-width="80" style="width: 276px" prop="staffId">
        <el-select placeholder="请输入教员ID" v-model="formData.staffId" >
          <el-option
              v-for="(staff,index) in staffList"
              :label="staff.realName"
              :value="staff.staffId"
              :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任:" style="width: 276px" prop="teacherId">
        <el-select v-model="formData.teacherId" placeholder="请输入班主任ID" >
          <el-option
              v-for="(staff,index) in staffList"
              :label="staff.realName"
              :value="staff.staffId"
              :key="index"
          />
        </el-select>
      </el-form-item>
     <el-form-item label="学科:" style="width: 276px" prop="subjectId">
       <el-select placeholder="请选择学科" v-model="formData.subjectId">
         <el-option
             v-for="item in subjectList"
             :label="item.label"
             :value="item.value"
             :key="item.value"
         />
       </el-select>
      </el-form-item>
      <el-form-item label="开班日期" label-width="80" prop="startDate">
        <el-date-picker
            v-model="formData.startDate"
            autocomplete="off"
            type="date" placeholder="选择日期"
            size="default"
            :editable="false"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
<!--      <el-form-item label="结业日期" label-width="80" prop="endDate">
        <el-date-picker
            v-model="formData.endDate"
            autocomplete="off"
            type="date" placeholder="选择日期"
            size="default"
            :editable="false"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>-->
      <el-form-item label="班级描述" style="width:73%"  prop="classDescription">
        <el-input type="textarea"  autocomplete="off" v-model="formData.classDescription" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">关闭</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
        <el-button @click="save(formRef)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.demo-form-inline{
  margin-left: 30px;
  text-align: center;
}
.demo-form-inline el-input{
  --el-input-width: 250px;
}
.demo-form-inline el-radio-group{
  --el-input-width: 250px;
}
.demo-form-inline el-date-picker{
  --el-input-width: 250px;
}
</style>